<template>
    <el-form-item label="添加规格" v-loading="bodyLoading">
        <el-card shadow="nerver" class="w-full mb-3" v-for="(item,index) in sku_card_list" :key="item.id" v-loading="item.loading">
            <template #header>
            <div class="flex items-center">
                <el-input v-model="item.text" placeholder="规格名称" style="width:200px" @change="handleUpadte(item)">
                    <template #append><el-icon @click="handleChooseSku(item)" class="cursor-pointer"><more/></el-icon></template>
                </el-input>
                <el-button class="ml-auto" size="small" text @click="sortCard('up',index)" :disabled="index == 0"> <el-icon><Top/></el-icon></el-button>
                <el-button size="small" text @click="sortCard('down',index)" :disabled="index === sku_card_list.length - 1"> <el-icon><Bottom/></el-icon></el-button>
                <el-popconfirm title="是否要删除规格？" confirm-button-text="确定" cancel-button-text="取消"
                    @confirm.stop="handleDelete(item)">
                    <template #reference>
                        <el-button size="small" text > <el-icon><Delete/></el-icon></el-button>
                    </template>
                </el-popconfirm>
            </div>
            </template>
            <SkuCardItem :skuCardId="item.id"/>
        </el-card>
        <el-button type="success" size="small" @click="addSkuCardEvent" :loading="btnLoading">添加规格</el-button>
    </el-form-item>
    <ChooseSku ref="ChooseSkuRef"/>
</template>

<script setup>
import { ref } from "vue"
import SkuCardItem from './SkuCardItem.vue'
import { sku_card_list,addSkuCardEvent,btnLoading,handleUpadte,handleDelete,sortCard , bodyLoading , handleChooseSetGoodsSkusCard } from '~/composables/useSku.js'
import ChooseSku from '~/components/image/ChooseSku.vue';

const ChooseSkuRef = ref(null)

const handleChooseSku = (item) =>{
    ChooseSkuRef.value.open((value) => {
        handleChooseSetGoodsSkusCard(item.id,{
            name:value.name,
            value:value.list
        })
    })
}
</script>

<style>
.el-card__header{
    @apply !p-2 bg-gray-50 ;
}
</style>